/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<app-head bg="#ffffff"></app-head>
		<view class="container" v-if="navData||navData.length>0">
			<!--#ifndef MP -->
			<view class="nav">
				<block v-for="(item,index) in navData" :key="index">
					<view @tap="switchFirstCategory" class="nav-item" :class="[navActive==index?'nav-item-on':'']" :data-index="index" :data-id="item.id">{{item.name}}</view>
				</block>
				
				
			</view>
			<!-- #endif -->
			<!--#ifdef MP -->
			<view class="nav" :style="{marginTop:navHeight+'px'}">
				<block v-for="(item,index) in navData" :key="index">
					<view @tap="switchFirstCategory" class="nav-item" :class="[navActive==index?'nav-item-on':'']"  :data-id="item.id">{{item.name}}</view>
				</block>
				
				
			</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="content">
			<!-- #endif -->
			<!-- #ifdef MP -->
			<view class="content" :style="{marginTop:navHeight+'px'}">
			<!-- #endif -->
				<image class="cate-img" mode="aspectFill" :src="hostUrl+ad.ad_code"role="img"></image>
				<block v-for="(item,index) in dataList">
					<view class="content-box" v-if="item.children.length>0"> <!-- -->
						<view @tap="goodsList" class="content-name" data-id="10">{{item.mobile_name}}</view>
						
						<view class="content-items" >
							<block v-for="(item2,index) in item.children">
								<navigator class="content-item" :url="'/pages/goods/goodsList/goodsList?cat_id='+ item2.id " role="navigation">
									<image class="item-image" :src="hostUrl+item2.image"  role="img"></image>
									<view class="item-name">{{item2.mobile_name}}</view>
								</navigator>
							</block>
						</view>
						
					</view>
				</block>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import appHead from "@/components/app-head/app-head";
	import {getGoodsCategoryList,getGoodsCategoryProgeny,getClassifyAd } from "@/api/api.js";
	import config from "@/api/config.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				hostUrl:config.host,//图片路径前缀
				is_level1:"1",//默认传是第一级
				ad:"",//广告
				adindex:0,
				navData:"",//导航栏
				navActive:0,//导航栏状态 默认0
				dataList:"",//商品分类数据
			};
		},
		components:{
			appHead
		},
		computed: {
			...mapState(['navHeight','navTop'])
		},
		created(){
			this._getGoodsCategoryList(this.is_level1)//商品分类查询列表
			
		},
		
		methods:{
			
			_getGoodsCategoryList(is_level1){//导航栏 数据
				getGoodsCategoryList(is_level1).then(res=>{
					console.log(res)
					this.navData=res;

					let id=this.navData[0].id
					this._getGoodsCategoryProgeny(id)//默认获取第一条
					this._getClassifyAd(401)//分类广告图 传 401
				})
			},
			_getClassifyAd(pid){//广告
				getClassifyAd(pid).then(res=>{
					console.log(res)
					this.ad=res.records[0];
				})
			},
			_getGoodsCategoryProgeny(id){ //右侧商品数据 根据左侧id 默认id1
				getGoodsCategoryProgeny(id).then(res=>{
					console.log(res)
					this.dataList=res;
				})
			},
			switchFirstCategory(e){ //导航点击切换
				let index=e.currentTarget.dataset.index;
				this.navActive = index
				let id=this.navData[index].id;
				this._getGoodsCategoryProgeny(id)
			}
		}
	}
</script>

<style lang="scss">
	.container{
	    flex-direction: row;
		
		padding-bottom: 0;
	}
	.nav{
	    width: 20%;
	    height:100%;
	    font-size: 26rpx;
	    text-align: center;
	    box-sizing: border-box;
	    display: inline-block;
	    position: fixed;
	    top: 0;
		//#ifdef H5
		top:0rpx;
		// #endif
		/* #ifdef APP-PLUS */
		top: var(--status-bar-height); 
		/* #endif */
	    bottom: 0;
	    left: 0;
	    overflow-x: hidden;
	    background-color: #ffffff;
	    padding-bottom: 105rpx;
	}
	.content-box:last-of-type{
	    margin-bottom:134rpx;
	}
	nav-item:last-of-type{
	    margin-bottom:134rpx;
	}
	.nav-item{
	    word-break: keep-all;
	    white-space: nowrap;
	    overflow: hidden;
	    padding: 25rpx 10rpx;
	    border-bottom: 1rpx solid #f3f3f3;
	    background-color: white;
	    text-overflow: ellipsis;
	}
	.nav-item-on{
	  color: #ff3b3b;
	  position: relative;
	  /* border-left: 8rpx solid #ff3b3b; */
	  /* padding: 25rpx 10rpx 25rpx 2rpx; */
	}
	.nav-item-on::after{
	  content: "";
	  width: 8rpx;
	  height: 100%;
	  position: absolute;
	  left: 0rpx;
	  top: 0rpx;
	  background: #ff3b3b;
	}
	.content{
	    width: 80%;
	    height:100%;
	    font-size: 28rpx;
	    padding: 0 20rpx;
	    box-sizing: border-box;
	    display: inline-block;
	    position: fixed;
	    top: 0;
		//#ifdef H5
		top:0rpx;
		// #endif
		/* #ifdef APP-PLUS */
		top: var(--status-bar-height); 
		/* #endif */
	    bottom: 0;
	    right: 0;
	    overflow-x: hidden;
	}
	.cate-img{
	    width: 100%;
	    height: 200rpx;
	    border-radius: 10rpx;
	    margin-top: 20rpx;
	}
	.content-name{
	    margin: 30rpx 0 20rpx;
	    padding-left: 10rpx;
	}
	.content-items{
	    background-color: white;
	    padding: 10rpx 20rpx;
	    box-sizing: border-box;
	    width: 100%;
	    border-radius: 10rpx;
	}
	.content-item{
	    width: 33.333333%;
	    box-sizing: border-box;
	    padding: 10rpx;
	    word-break: keep-all;
	    white-space: nowrap;
	    overflow: hidden;
	    display: inline-block;
	    text-align: center;
	}
	.item-image{
	    width: 100rpx;
	    height: 100rpx;
	}
	.item-name{
	    padding: 10rpx 0 0;
	}
</style>
